$(function() {
  // 首页数据渲染
  var pageSize = 4;
  var currentPage = 1;
  function render() {
    //其他参数:beforeSend在发送之前可以使用return false取消,timeout超时时间,error,async同步还是异步
    $.ajax({
      type: "get", //get或post
      url: "/category/queryTopCategoryPaging", //请求的地址
      data: {
        page: currentPage,
        pageSize: pageSize
      }, //如果不需要传，则注释掉 请求的参数，a=1&b=2或{a:1,b:2}或者jq中的serialize方法，或者formData收集
      dataType: "json", //text,json,xml,jsonp
      success: function(res) {
        //成功的回调函数
        console.log(res);
        $("tbody").html(template("tmp", res));
        setPage(res.total);
      }
    });
  }
  render();
  // 2- 分页
  // 1-分页标签的个数， 根据后台数据库数据的总数来生成
  // 2-分页标签 使用插件生成
  function setPage(total) {
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3, //默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: currentPage, //当前页  高亮效果加给谁
      totalPages: Math.ceil(total / pageSize), //总页数
      onPageClicked: function(event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮值,就是当前页面
        console.log(page);
        // 改写当前页码值
        currentPage = page;
        // 重新渲染
        render();
      }
    });
  }
  // 3- 表单校验
  //使用表单校验插件
  $(".add-form").bootstrapValidator({
    //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
    excluded: [":disabled", ":hidden", ":not(:visible)"],

    //2. 指定校验时的图标显示，默认是bootstrap风格
    feedbackIcons: {
      valid: "glyphicon glyphicon-ok",
      invalid: "glyphicon glyphicon-remove",
      validating: "glyphicon glyphicon-refresh"
    },

    //3. 指定校验字段
    fields: {
      //校验用户名，对应name表单的name属性
      categoryName: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入一级分类名称"
          }
        }
      }
    }
  });

  //4. 添加一级分类
  // 1- 点击提交按钮， 在表单数据合理情况下（success.form.bv），发送请求，进行提交
  // 2- 数据添加完成后，页面要重新渲染， 隐藏模态框，表单重置
  $(".add-form").on("success.form.bv", function(e) {
    // 阻止默认行为
    e.preventDefault();
    // 获取数据序列化
    var str = $(".add-form").serialize();
    //   提交后台
    //其他参数:beforeSend在发送之前可以使用return false取消,timeout超时时间,error,async同步还是异步
    $.ajax({
      type: "post", //get或post
      url: "/category/addTopCategory", //请求的地址
      data: str, //如果不需要传，则注释掉 请求的参数，a=1&b=2或{a:1,b:2}或者jq中的serialize方法，或者formData收集
      dataType: "json", //text,json,xml,jsonp
      success: function(res) {
        //成功的回调函数
        console.log(res);
        //   重新渲染
        render();
        //   隐藏模态框
        $(".modal-add").modal("hide");
        // 表单重置
        // $('.add-form')[0].reset();
        //表单校验插件实例去调用 resetForm(true); 即重置表单样式还重置数据
        $(".add-form")
          .data("bootstrapValidator")
          .resetForm(true);
      }
    });
  });
});
